<template>
  <basic-dialog :visible="show"
                title="工单详情"
                isShowClose
                isFullScreen
                :min-width="'760px'"
                :titleTips="`[${form.id ? form.id : '--'}]`"
                :isShowInnerLoading = 'isShowInnerLoading'
                @close="show = false"
  >
    <q-tabs
      v-model="tab"
      narrow-indicator
      inline-label
      dense
      align="left"
      indicator-color="primary"
      active-color="primary"
      style="padding: 0 15px"
    >
      <q-tab @click="clickprocessInfo" name="processInfo" label="工艺信息" />
      <q-tab @click="clickprocessingProgramList" name="processingProgramList" label="加工程序列表" />
      <q-tab @click="clickPlanDescription" name="planDescription" label="计划描述" />
    </q-tabs>

    <q-separator />

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel style="padding: 20px 0" name="processInfo">
        <div class="row" style="padding: 0 20px 20px">
          <div class="col-3 text-ellipsis">
            工序名称：{{ rowInfo.processName ? `${rowInfo.processName}` : '--' }}
            <q-tooltip>{{ rowInfo.processName ? `${rowInfo.processName}` : '--' }}</q-tooltip>
          </div>
          <div class="col-3 text-ellipsis">
            设备类型：{{ processInfo.deviceType || '--'}}
            <q-tooltip>{{ processInfo.deviceType || '--'}}</q-tooltip>
          </div>
          <div class="col-4 text-ellipsis">
            理论工序节拍：{{ rowInfo.cycleTime ? getDuration(rowInfo.cycleTime) : '--' }}
            <q-tooltip>{{ rowInfo.cycleTime ? getDuration(rowInfo.cycleTime) : '--' }}</q-tooltip>
          </div>
          <div class="col-2 text-ellipsis">
            质检工序：{{ form.isQualityProcess ? '是' : '否'}}
          </div>
        </div>
        <div style="padding: 0 20px;">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white">{{ '工艺内容' }}</div>
          </q-card-section>
          <q-input disable outlined v-model="processInfo.comments" type="textarea" class="textarea-box" autogrow maxlength="200"/>
        </div>
        <div style="padding: 0 20px; margin-top: 20px">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white">{{ '工艺文件' }}</div>
          </q-card-section>
          <q-card-section style="padding: 0;">
            <div>
              <q-scroll-area class="box-content bg-white bordered" :thumb-style="thumbStyle" style="height: 300px;border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;padding: 10px 10px; border: 1px solid #d3d3d3">
                <div class="sudoku_row"  >
                  <div class="sudoku_item " v-for="(processFile,index) in processFileList" :key="index">
                    <div @click="showFile(judgeFileExtension(processFile.name).type, processFile)" v-ripple class="file_item relative-position">
                      <div style="display: flex">
                        <i class="iconfont" :class="[judgeFileExtension(processFile.name).icon]" :style="{color: judgeFileExtension(processFile.name).color}"/>
                        <span class="text-ellipsis" style="width: 100px; display: inline-block;line-height: 26px;margin-left: 3px">
                          {{ processFile.name }}
                          <q-tooltip anchor="bottom middle" self="center middle">{{ processFile.name }}</q-tooltip>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </q-scroll-area>
            </div>
          </q-card-section>
        </div>
      </q-tab-panel>

      <q-tab-panel style="padding: 20px" name="processingProgramList">
        <q-table
          :data="tableDataProgramList" :columns="columnsProgramList"
          row-key="name" class="myTable scroll inherit"
          style="margin: 0; max-height: 400px"
          :pagination.sync="paginationProgramList" :hide-bottom="!!tableDataProgramList.length">
          <template v-slot:body-cell-createTime="props">
            <q-td>
              {{ props.row.createTime | toTime }}
            </q-td>
          </template>
          <template v-slot:body-cell-id="props">
            <q-td class="operations" style="width: 200px">
              {{ tableDataProgramList.indexOf(props.row) + 1 }}
            </q-td>
          </template>
        </q-table>
      </q-tab-panel>

      <q-tab-panel name="planDescription">
        <div>
          <div v-html="comment"></div>
        </div>
      </q-tab-panel>
    </q-tab-panels>
    <!-- tab内容End -->
    <!--查看pdf-->
    <look-pdf ref="showPdf"/>

    <!--查看图片-->
    <look-img ref="showImg"/>
  </basic-dialog>
</template>

<script>
import {
  processList,
  processFileList,
  getWorkshopPlanning, getWorkingSteps
} from 'src/boot/job/process-order'
import lookImg from 'src/components/look-img'
import lookPdf from 'src/components/look-pdf'
export default {
  name: 'order-details',
  components: {
    lookImg,
    lookPdf
  },
  data () {
    return {
      show: false,
      isShowInnerLoading: false,
      processFileList: [],
      curSelect: null,
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      processInfo: {
        comments: ''
      }, // 工艺信息
      tab: 'basicInfo',
      form: {},
      // 加工程序列表数据源
      tableDataProgramList: [],
      // 让步明细表格数据列
      columnsProgramList: [
        { name: 'id', label: '序号', align: 'left', field: 'id' },
        { name: 'name', label: '加工程序', align: 'left', field: 'name' },
        { name: 'comments', label: '备注', align: 'left', field: 'comments' },
        { name: 'createTime', label: '创建时间', align: 'left', field: 'createTime' }
      ],
      // 让步明细表格分页器
      paginationProgramList: {
        rowsPerPage: 0
      },
      rowInfo: {},
      comment: ''
    }
  },
  methods: {
    // 预览文件
    showFile (type, item) {
      if (type === 'pdf') {
        this.$refs.showPdf.showDialog(item.url)
      } else {
        this.$refs.showImg.showDialog(item.url)
      }
    },

    // 点击工艺信息
    clickprocessInfo () {
      if (this.form.processInfoId) {
        this.getProcessInfo()
        this.getProcessFileList()
      } else {
        this.processFileList = []
        this.processInfo = {
          comments: ''
        }
      }
    },

    // 点击加工程序列表
    clickprocessingProgramList () {
      if (this.form.processInfoId) {
        this.getProcessList()
      } else {
        this.tableDataProgramList = []
      }
    },
    // 点击计划描述
    clickPlanDescription () {
      getWorkshopPlanning(this.form.workshopPlanningId).then(res => {
        const comments = res.data.comments
        if (comments) {
          let result = ''
          const commentList = comments.split('\n')
          commentList.forEach(item => {
            result += `<div style="word-break: break-all">${item}</div>`
          })
          this.comment = result
        } else {
          this.comment = `<div>--</div>`
        }
      })
    },

    // 时间转换
    getDuration (second) {
      var days = Math.floor(second / 86400)
      var hours = Math.floor((second % 86400) / 3600)
      var minutes = Math.floor(((second % 86400) % 3600) / 60)
      var seconds = Math.floor(((second % 86400) % 3600) % 60)
      var duration = days + '天' + hours + '小时' + minutes + '分' + seconds + '秒'
      return duration
    },

    // 获取加工程序列表
    async getProcessList () {
      this.tableDataProgramList = []
      let res = await processList(this.form.processInfoId)
      this.tableDataProgramList = this.$utils.setLabel(res.data, this.columnsProgramList)
    },

    // 获取工艺信息
    async getProcessInfo () {
      getWorkingSteps(this.form.workingStepId).then(res => {
        if (res.data) {
          this.processInfo = Object.assign(res.data)
        }
      })
    },

    // 获取文件列表
    async getProcessFileList () {
      this.processFileList = []
      let res = await processFileList(this.form.processInfoId)
      this.processFileList = res.data
    },

    // 判断文件后缀
    judgeFileExtension (name) {
      let index = name.lastIndexOf('.')
      let ext = name.substr(index + 1)
      if (ext.toLowerCase() === 'pdf') {
        return {
          icon: 'icontubiao-137',
          color: 'red',
          type: 'pdf'
        }
      } else {
        return {
          icon: 'icontubiao-136',
          color: '#a8efed',
          type: 'img'
        }
      }
    },

    // 编辑填充表格
    assignment (val, orderData) {
      console.log(val, '编辑填充表格')
      this.show = true
      this.form = val
      this.rowInfo = orderData
      this.tab = 'processInfo'
      this.clickprocessInfo()
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.textarea-box .q-field__control{
    border-radius 6px
    border-top-left-radius 0
    border-top-right-radius 0
  }
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }
  .sudoku_row{
    display: flex;
    align-items: center;
    width:100%;
    flex-wrap: wrap;
  }
  .sudoku_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:25%;
    padding: 3px
  }
  .file_item{
    display flex
    justify-content center
    align-items center
    width 100%
    height 40px
    border-radius 6px
    cursor pointer
    border 1px solid #d3d3d3
/*    background: #f7b82d
    color: #fff*/
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.15)
  }
/*  .opacity{
    opacity: 0.4;
    background: #e5e5e5;
  }*/
/*  .sudoku_item img{
    margin-bottom: 3px;
    display: block;
  }*/
</style>

<style lang="stylus">
  .work-order-details {
    .myTable .q-table__middle{
      max-height calc(100% - 100px)
    }
  }
</style>
